<html>
    <head>
        <title>Editor</title>
        <style type="text/css" title="main" media="screen"> 
            #editor {background-color:#ffffff; border:1px solid #B8B8B8; width:100%; height:640px; outline: none; }
            #save {border:1px solid #000000; height:40px; width:120; cursor:pointer;}
            body {background-color:#E8E8E8;}
        </style>
        <script type="text/javascript" src="/static/jquery.js"></script>
        <script type="text/javascript">
        
            if (window['loadFirebugConsole']) {
               window.loadFirebugConsole();
            } else {
               if (!window['console']) {
                   window.console = {};
                   f = function func(arg){};
                   window.console.info = f;
                   window.console.log = f;
                   window.console.warn = f;
                   window.console.error = f;
               }
            }
                    
            function refresh_data(){
                console.log('in refresh data');
                $('#parent_revision_uid_label').text($('#data').data('parent_revision_uid'));
                $('#tag_uid_label').text($('#data').data('tag_uid'));
            
            }
        
            $(document).ready(function(){
            
                console.log('document ready');
                var editor = document.getElementById('editor');
                console.log('loaded editor');
                var isCtrl = false;
                var isCmd = false;
    
                $('#editor').load( function(){
                    //var content = '{% autoescape off %}{{ text }}{% endautoescape %}';
                    //editor.contentWindow.loadContent(content);
                    
                });

                
                //$('#editor').bind('paste', function(e){ alert('pasting!') });
    
                $('#data').data('parent_revision_uid', '{{ parent_revision_uid }}');
                $('#data').data('tag_uid', '{{ tag_uid }}');
                    
                refresh_data();
                $("#bold").click(function () {
                
                    console.log('Bold Button CLicked');
                    //$('#editor').contents().inBetween('bold', false, null);
                    editor.contentWindow.inBetween('bold', false, null);
                    //editor.contentWindow.loadContent(content);
                    //$('#editor').contentWindow.inBetween('bold', false, null);
                });
                $("#html").click(function () {
                    var html = prompt('HTML:');
                    console.log('before: ' + html);
                    html = html.replace("&amp;", "&");
                    console.log('after: ' + html);
                    editor.contentWindow.inBetween('inserthtml', false, html);
                    
                });    
                
                $("#format").click(function () {
                    console.log('Formatting text')
                    editor.contentWindow.customTag();
                    
                });  
                
                $("#youtube").click(function () {
                    console.log('Youtube');
                    var html = '<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/Z_KnBKriGog&hl=it_IT&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Z_KnBKriGog&hl=it_IT&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>'
                    editor.contentWindow.inBetween('inserthtml', false, html);
                    
                });                 
                
                $("#save").click(function () { 
                    var text = $('#editor').contents().find("body").html(); 

                    console.log('Text: ' + text);
                    $.post("/{{project_uid}}/pages/{{page_uid}}/save/", {
					    'text': text,
					    'parent_revision_uid' : $('#data').data('parent_revision_uid'),
					    'tag_uid' : $('#data').data('tag_uid'),
					    'page_path' : '{{ page_path }}',
					},
                        function(data){
                            //alert(data.message); // John
                            console.log(data.message); //  2pm
                            $('#data').data('parent_revision_uid', data.parent_revision_uid);
                            $('#data').data('tag_uid', data.tag_uid);
                        }, "json");
                });
            });
        </script>
    </head>
    <body>
        <div>
            <!--  <div id='editor' contenteditable='True'>{% autoescape off %}{{ text }}{% endautoescape %}</div>-->
            <div id='bold'>Bold</div><div id='html'>HTML</div><div id='format'>Format</div><div id='youtube'>Youtube</div>
            <iframe id="editor" src="/pages/editorframe/{{ tag_uid }}/"></iframe><div id='data'/>
            <div id='save'>Save</div>
            <div name='info'>
                 <p>Parent revision uid" <b><span id='parent_revision_uid_label'></span></b></p>
                 <p>Tag uid" <b><span id='tag_uid_label'></span></b></p>
                 <p>Page uid" <b>{{ page_uid }}</b></p>
                 <p>Project uid" <b>{{ project_uid }}</b></p>
            </div>
        </div>
    </body>
</html>
